<%@ page language="java" pageEncoding="UTF-8"%>
<!-- bin/jquery.slider.min.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery/jslider/css/jslider.css?t=${commonAppTimestamp}" type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery/jslider/css/jslider.plastic.css?t=${commonAppTimestamp}" type="text/css">
<!-- end -->

<!-- bin/jquery.slider.min.js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jslider/js/jshashtable-2.1_src.js?t=${commonAppTimestamp}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jslider/js/jquery.numberformatter-1.2.3.js?t=${commonAppTimestamp}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jslider/js/tmpl.js?t=${commonAppTimestamp}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jslider/js/jquery.dependClass-0.1.js?t=${commonAppTimestamp}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jslider/js/draggable-0.1.js?t=${commonAppTimestamp}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jslider/js/jquery.slider.js?t=${commonAppTimestamp}"></script>
<!-- end -->
<style type="text/css" media="screen">
/*  .jslider .jslider-value { font-size: 12px; } */
</style>
<script type="text/javascript">
<!--//-->//><!--

var timeSliderSetting1 = { 
		  from: 0, 
		  to: 24, 
		  heterogeneity: ['50/12','75/21'], 
		  //scale: [0, '|', 2, '|', 4, '|', 6, '|',  8, '|',10, '|', 12, '|', 14, '|', 16, '|',18, '|', 20, '|', 22, '|',24 ],
		  //scale: [0,  2,  4,  6,  8, 10, 12,  14,  16, 18,  20, 22, 24 ],
		  limits: true, 
		  round: 0,
		  step: 1,
		  dimension: '&nbsp;', 
		  skin: "plastic",
		  callback : function(){
		  }
		};
		
var timeSliderSetting2 = { 
		  from: 0, 
		  to: 24, 
		  heterogeneity: ['50/12','75/21'], 
		  //scale: [0, '|', 2, '|', 4, '|', 6, '|',  8, '|',10, '|', 12, '|', 14, '|', 16, '|',18, '|', 20, '|', 22, '|',24 ],
		  //scale: [0,  2,  4,  6,  8, 10, 12,  14,  16, 18,  20, 22, 24 ],
		  limits: true, 
		  round: 0,
		  step: 1,
		  dimension: '&nbsp;', 
		  skin: "plastic",
		  callback : function(){
		  }
		};
		
var timeSliderSetting3 = { 
		  from: 0, 
		  to: 24, 
		  heterogeneity: ['50/12','75/21'], 
		  //scale: [0, '|', 2, '|', 4, '|', 6, '|',  8, '|',10, '|', 12, '|', 14, '|', 16, '|',18, '|', 20, '|', 22, '|',24 ],
		  //scale: [0,  2,  4,  6,  8, 10, 12,  14,  16, 18,  20, 22, 24 ],
		  limits: true, 
		  round: 0,
		  step: 1,
		  dimension: '&nbsp;', 
		  skin: "plastic",
		  callback : function(){
		  }
		};
		
var timeSliderSetting4 = { 
		  from: 0, 
		  to: 24, 
		  heterogeneity: ['50/12','75/21'], 
		  //scale: [0, '|', 2, '|', 4, '|', 6, '|',  8, '|',10, '|', 12, '|', 14, '|', 16, '|',18, '|', 20, '|', 22, '|',24 ],
		  //scale: [0,  2,  4,  6,  8, 10, 12,  14,  16, 18,  20, 22, 24 ],
		  limits: true, 
		  round: 0,
		  step: 1,
		  dimension: '&nbsp;', 
		  skin: "plastic",
		  callback : function(){
		  }
		};
		
var timeSliderSetting5 = { 
		  from: 0, 
		  to: 24, 
		  heterogeneity: ['50/12','75/21'], 
		  //scale: [0, '|', 2, '|', 4, '|', 6, '|',  8, '|',10, '|', 12, '|', 14, '|', 16, '|',18, '|', 20, '|', 22, '|',24 ],
		  //scale: [0,  2,  4,  6,  8, 10, 12,  14,  16, 18,  20, 22, 24 ],
		  limits: true, 
		  round: 0,
		  step: 1,
		  dimension: '&nbsp;', 
		  skin: "plastic",
		  callback : function(){
		  }
		};
		
var timeSliderSetting6 = { 
		  from: 0, 
		  to: 24, 
		  heterogeneity: ['50/12','75/21'], 
		  //scale: [0, '|', 2, '|', 4, '|', 6, '|',  8, '|',10, '|', 12, '|', 14, '|', 16, '|',18, '|', 20, '|', 22, '|',24 ],
		  //scale: [0,  2,  4,  6,  8, 10, 12,  14,  16, 18,  20, 22, 24 ],
		  limits: true, 
		  round: 0,
		  step: 1,
		  dimension: '&nbsp;', 
		  skin: "plastic",
		  callback : function(){
		  }
		};
		
var timeSliderSetting7 = { 
		  from: 0, 
		  to: 24, 
		  heterogeneity: ['50/12','75/21'], 
		  //scale: [0, '|', 2, '|', 4, '|', 6, '|',  8, '|',10, '|', 12, '|', 14, '|', 16, '|',18, '|', 20, '|', 22, '|',24 ],
		  //scale: [0,  2,  4,  6,  8, 10, 12,  14,  16, 18,  20, 22, 24 ],
		  limits: true, 
		  round: 0,
		  step: 1,
		  dimension: '&nbsp;', 
		  skin: "plastic",
		  callback : function(){
		  }
		};

$(function() {

});
//--><!
</script>
<%--
		  var oldValue1=$('#slider1').val();

		  timeSliderSetting1.callback = function(value){
		    var v = value.split(';');
			if(v[0] == v[1]){
				alert('区间选择至少1个小时');
				$('#slider1').val(oldValue1);
			}else{
				oldValue1=$('#slider1').val();
				alert('changed: ' + value + ' slider1: ' + $('#slider1').val() + ' v0: ' + v[0] + ' v1: ' + v[1]);
			}
			
		  }

		  jQuery("#slider1").slider(timeSliderSetting1);
		  
	<div class="layout-slider" style="width: 100%; ">
      <span style="display: inline-block; width: 400px; padding: 0 5px;">
		<input id="slider1" type="text" name="area" value="12;18" />
	  </span>
    </div>
 --%>